<template>
<Card v-if="!!e&&draw.show" :title="title" :style="position">
  <span slot="extra"><Icon type="md-close" @click.native="close"></Icon></span>
  <slot></slot>
</Card>
</template>

<script>
export default {
  name: "cfg-menu",
  data(){
    return {
      position:{
        minWidth:'200px',
        boxShadow: '0 1px 6px rgb(0 0 0 / 20%)',
        position:'absolute',
        left:'0px',
        top:'0px',
        zIndex:100
      }
    }
  },
  props:{
    draw:{
      default:()=>{
        return {
          show:false
        }
      }
    },
    title:{
      default:()=>{
        return ''
      }
    },
    e:{
      default:()=>{
        return null
      }
    }
  },
  watch:{
    "e":function(){
      if(!!this.e){
        this.$set(this.position,'left',this.e.clientX+'px');
        this.$set(this.position,'top',this.e.clientY+'px');
        this.$set(this.draw,'show',true);
      }
    }
  },
  mounted() {
    if(!!this.e){
      this.$set(this.position,'left',this.e.clientX+'px');
      this.$set(this.position,'top',this.e.clientY+'px');
      this.$set(this.draw,'show',true);
    }
  },
  methods:{
    close(){
      this.draw.show=false;
      this.$emit('close');
    }
  }
}
</script>

<style scoped>

</style>
